@import "../../playerColors.less";
@progress-height: 10px;
@progress-radius: (@progress-height / 2);
.progress {
  display: flex;
  align-items: center;
  flex: 1;
  color: @player-font-color;
  cursor: pointer;

  .progress-full {
    @progress-full-padding: 20px;

    width: 100%;
    height: @progress-height;
    border-radius: @progress-radius;
    background-color: rgba(126, 126, 126, 0.7);
    margin: 0 @progress-full-padding;
    // overflow: hidden;
    &:hover {
      transform: scaleY(1.2);
      .progress-step {
        background-color: darken(@btn-hover-color, 10%);
        .dot {
          transform: scaleX(1.6) scaleY(1.5);
          visibility: visible;
        }
      }
    }
    .current-time {
    }
    .total-time {
    }
    .progress-step {
      position: relative;
      height: @progress-height;
      border-radius: @progress-radius;
      background-color: @btn-hover-color;
      .dot {
        @dot-size: 10px;
        position: absolute;
        top: 0;
        right: -(@progress-full-padding - @dot-size);
        height: @dot-size;
        width: @dot-size;
        border-radius: 50%;
        background-color: lighten(@btn-hover-color, 10%);
        visibility: hidden;
      }
    }
  }
}